var baseStyle = {
  lineHeight: "1.75rem",
  whiteSpace: "pre-wrap",
};
function renderCell_alignLeft(value, index, rowData,css={}) {//设置左对齐，一般适用于文本  
    let newStyle = {    
        textAlign: "left",
        ...baseStyle,
        ...css,
    }  
    let result = value || "无数据"
    if(!value){
        newStyle.color = "red"
    }
    return React.createElement(
        'div',
        {
        style: newStyle,
        key: `renderCell_alignLeft${index}`, // 如果这个元素在列表中，最好添加 key
        },
        result
    );

}
function renderCell_alignLeftBold(value, index, rowData,css={}) {//设置加粗字体左对齐，突出显示
    let newStyle = {   
        fontWeight: 600,
        textAlign: "left",
        ...baseStyle,
        ...css,
    }
    let result = value || "无数据"
    if(!value){
        newStyle.color = "red"
    }
    return React.createElement(
        'div',
        {
        style: newStyle,
        key: `renderCell_alignLeftBold${index}`, // 如果这个元素在列表中，最好添加 key
        },
        result
    );

}
function renderCell_alignRight(value, index, rowData,css={}) {//设置右对齐,一般用于数字
    let newStyle = {
        textAlign: "right",
        ...baseStyle,
        ...css,
    }
    let result = value || "无数据"
    if(!value){
        newStyle.color = "red"
    }
    return React.createElement(
        'div',
        {
        style: newStyle,
        key: `renderCell_alignLeftBold${index}`, // 如果这个元素在列表中，最好添加 key
        },
        result
    );
}
function splitContent(value, index, rowData, css={}) {
    let newStyle = {
        textAlign: "right",
        ...baseStyle,
        ...css,
    };    
    if (!value || !value.length) {
        newStyle.color = "red";
        return React.createElement(
            'div',
            {
                style: newStyle,
                key: `renderCell_${index}`,
            },
            "无数据"
        );
    }    
    const lines = value.split('\n');    
    return React.createElement(
        'div',
        {
            style: newStyle,
            key: `renderCell_${index}`,
        },
        lines.map((line, lineIndex) => 
            React.createElement(
                'div',
                {
                    key: `line_${index}_${lineIndex}`,
                    style: { textAlign: 'left' } // 真正的左对齐
                },
                line
            )
        )
    );
}
function renderCell_pic(value, index, rowData,_) {//自定义渲染图片
  // 处理空值情况
  if (!value) {
    return React.createElement('span', null, '无图片');
  }

  try {
    const arr = JSON.parse(value);
    if (!Array.isArray(arr) || arr.length === 0) {
      return React.createElement('span', null, '无图片');
    }

    return createImageGallery(arr, index, rowData,_);
  } catch (error) {
    console.error('图片数据解析失败:', error);
    return React.createElement('span', null, '数据格式错误');
  }
}

// 创建图片库组件
function createImageGallery(images, index, rowData,_) {
  const picClass = `pic${index}`;
  const isVisible = rowData.picShow !== 'none';
  
  // 图片hover效果样式
  const hoverStyle = {
    backgroundColor: "#F9F2F4",
    transform: "scale3d(1.2, 1.2, 1.2)",
    transition: "all 0.3s ease"
  };
  
  const normalStyle = {
    backgroundColor: "white",
    transform: "scale3d(1, 1, 1)",
    transition: "all 0.3s ease"
  };

  // 创建切换按钮
  const buttonColor = isVisible ? 'red' : 'green';
  const buttonText = isVisible ? '隐藏' : '显示';
  
  const toggleButton = React.createElement(
    'span',
    {
      style: { 
        color: buttonColor, 
        cursor: "pointer",
        userSelect: "none"
      },
      onClick: createToggleHandler(picClass, images.length)
    },
    `${buttonText}${images.length}张图片`
  );

  // 创建图片容器
  const imageContainer = React.createElement(
    'div',
    {
      style: { 
        display: isVisible ? 'block' : 'none', 
        marginTop: "25px" 
      },
      className: picClass
    },
    images.map((item, imgIndex) => 
      createImageThumbnail(item, index, imgIndex, hoverStyle, normalStyle,_)
    )
  );

  // 返回主容器
  return React.createElement(
    'div',
    { style: { fontWeight: 700 } },
    [toggleButton, imageContainer]
  );
}

// 创建图片缩略图
function createImageThumbnail(item, index, imgIndex, hoverStyle, normalStyle,_) {

  const url = `https://www.aliwork.com${item.url}`;
  const name = item.name ? item.name.substring(0, item.name.lastIndexOf(".")) : '图片';
  
  const imgElement = React.createElement(
    'img',
    {
      style: {
        width: '80px',
        height: '50px',
        objectFit: 'cover',
        ...normalStyle
      },
      src: url,
      title: name,
      alt: name,
      onMouseOver: (e) => {
        Object.assign(e.target.style, hoverStyle);
      },
      onMouseOut: (e) => {
        Object.assign(e.target.style, normalStyle);
      }
    }
  );
   
  return React.createElement(
    'div',
    {
      key: `img_${index}_${imgIndex}`,
      style: { 
        display: 'inline-block',
        margin: '0 5px 5px 0',
        cursor: 'pointer'
      },
      onClick: () => {
        _.utils.previewImage({ current: url });
      }
    },
    imgElement
  );
}

// 创建切换显示/隐藏的处理函数
function createToggleHandler(picClass, imageCount) {
  return function(e) {
    const picElement = document.getElementsByClassName(picClass)[0];
    if (!picElement) return;
    
    const currentDisplay = picElement.style.display;
    const isVisible = currentDisplay === 'block';
    const newDisplay = isVisible ? 'none' : 'block';
    const newColor = isVisible ? 'green' : 'red';
    const newText = isVisible ? '显示' : '隐藏';
    
    // 更新显示状态
    picElement.style.display = newDisplay;
    
    // 更新按钮文本和颜色
    e.target.innerHTML = `${newText}${imageCount}张图片`;
    e.target.style.color = newColor;
  };
}


function renderCell_file(value, index, rowData) {///自定义渲染附件
  // 处理空值情况
  if (!value) {
    return React.createElement('span', null, '无文件');
  }

  try {
    const arr = JSON.parse(value);
    if (!Array.isArray(arr) || arr.length === 0) {
      return React.createElement('span', null, '无文件');
    }

    return createFileList(arr);
  } catch (error) {
    console.error('文件数据解析失败:', error);
    return React.createElement('span', null, '数据格式错误');
  }
}

// 创建文件列表组件
function createFileList(files) {
  const fileElements = files.map((item, fileIndex) => 
    createFileItem(item, fileIndex)
  );

  return React.createElement(
    'div',
    {
      style: { 
        textAlign: "left"
      }
    },
    fileElements
  );
}

// 创建单个文件项
function createFileItem(item, index) {
  const url = `https://www.aliwork.com${item.previewUrl}`;
  const name = item.name ? item.name.substring(0, item.name.lastIndexOf(".")) : '文件';
  
  // 定义hover样式效果
  const hoverStyle = {
    backgroundColor: "#F9F2F4",
    transform: "scale3d(1.2, 1.2, 1.2)",
    transition: "all 0.3s ease"
  };
  
  const normalStyle = {
    backgroundColor: "white",
    transform: "scale3d(1, 1, 1)",
    transition: "all 0.3s ease",
    ...baseStyle
  };

  // 创建链接元素
  const linkElement = React.createElement(
    'a',
    {
      href: url,
      target: "_blank",
      style: {
        display: "inline-block",
        padding: "2px 5px",
        borderRadius: "3px",
        textDecoration: "none",
        color: "#1890ff",
        ...normalStyle
      },
      onMouseOver: (e) => {
        Object.assign(e.target.style, hoverStyle);
      },
      onMouseOut: (e) => {
        Object.assign(e.target.style, normalStyle);
      },
      title: `下载: ${name}`
    },
    `${index + 1}、${name}`
  );

  return React.createElement(
    'div',
    {
      key: `file_${index}`,
      style: { 
        marginBottom: "5px" 
      }
    },
    linkElement
  );
}
function splitMumbers(value, index, rowData) {//将成员组件值拆分显示
  const containerStyle = {
    textAlign: "left",
    lineHeight: "1.75em"
  };

  const noDataStyle = {
    textAlign: "left",
    color: "red",
    fontStyle: "italic"
  };

  // 基础验证
  if (!value || value.length === 0 ) {
    return React.createElement(
      'span',
      { style: noDataStyle },
      React.createElement('div', null, '无数据')
    );
  }

  try {  
    // 创建列表项
    const listItems = value.map((item, idx) => 
      React.createElement(
        'div',
        {
          key: `item_${index}_${idx}`,
          style: {
            padding: "2px 0"
          }
        },
        `${idx + 1}、${item}`
      )
    );

    return React.createElement(
      'div',
      { style: containerStyle },
      listItems
    );

  } catch (error) {
    console.warn('数据解析错误:', error);
    return React.createElement(
      'span',
      { style: noDataStyle },
      React.createElement('div', null, '数据格式错误')
    );
  }
}
function renderTable(value, index, rowData,_) {
  // 子表数据自定义成表格显示 
  if (value && value.length) {
    let { tableConfigs, activeIndex, innerWidth } = _.state;
    let tableConfig = tableConfigs[activeIndex];
    let keys = Object.keys(tableConfig);
    
    try {
      let table;
      
      if (innerWidth <= 768) {
        // 移动端表格
        table = React.createElement(
          'table',
          { className: 'custom-table' },
          value.map((item, selfIndex) => {
            return React.createElement(
              'tbody',
              { key: selfIndex },
              [
                selfIndex > 0 && React.createElement(
                  'div',
                  { 
                    className: 'tbody-spacing',
                    key: 'spacing'
                  }
                ),
                ...keys.map(elt => {
                  return React.createElement(
                    'tr',
                    { key: elt },
                    [
                      React.createElement(
                        'td',
                        { 
                          className: 'custom-table-td custom-table-td-768',
                          key: 'label'
                        },
                        elt
                      ),
                      React.createElement(
                        'td',
                        { 
                          className: 'custom-table-td',
                          style: { "backgroundColor": "white", "width": "60%" },
                          key: 'value'
                        },
                        item[tableConfig[elt].key] || 0
                      )
                    ]
                  );
                })
              ].filter(Boolean) // 过滤掉 false 值（当 selfIndex <= 0 时的 spacing）
            );
          })
        );
      } else {
        // 桌面端表格
        table = React.createElement(
          'table',
          { className: 'custom-table' },
          [
            React.createElement(
              'thead',
              { key: 'thead' },
              React.createElement(
                'tr',
                null,
                keys.map(item => {
                  return React.createElement(
                    'th',
                    { 
                      className: 'custom-table-th',
                      style: { "width": tableConfig[item].width },
                      key: item
                    },
                    item
                  );
                })
              )
            ),
            React.createElement(
              'tbody',
              { key: 'tbody' },
              value.map((item, selfIndex) => {
                return React.createElement(
                  'tr',
                  { key: selfIndex },
                  keys.map(elt => {
                    return React.createElement(
                      'td',
                      { 
                        className: 'custom-table-td',
                        style: { textAlign: tableConfig[elt].textAlign },
                        key: elt
                      },
                      item[tableConfig[elt].key] || 0
                    );
                  })
                );
              })
            )
          ]
        );
      }
      
      return table;
    } catch (e) {
      console.log(e);
      return null;
    }
  } else {
    // 无数据情况
    return React.createElement(
      'span',
      { className: 'no-data' },
      React.createElement('div', null, '无数据')
    );
  }
}